import React, { useEffect, useState } from "react";
import Draw from "./Draw";
import _EE_ from "./EventEmitter";
import DotBackground from "./DotBackground";
import Tools from "./Tools";
type propsTypes = {};

export enum directiveEnum {
  HAND = "hand",
  PENCIL = "pencil",
  MARKPEN = "markPen",
  ERASER = "eraser",
  POLYLINE = "polyline",
  IMAGE = "image",
  ANIMATION = "animation",
}
function Figment(props: propsTypes) {
  const [directive, setDirective] = useState<directiveEnum>(directiveEnum.HAND); //当前用的是哪一支笔
  const [drawFlag, setDrawFlag] = useState<boolean>(true);
  const onChangeDirective = (val: directiveEnum) => {
    setDirective(val);
  };
  const onChangeDrawFlag = (val: boolean) => {
    setDrawFlag(val);
  };
  useEffect(() => {
    document.title = "画板";
    _EE_.on("_set_directive", onChangeDirective);
    _EE_.on("setDrawFlag", onChangeDrawFlag);
    return () => {
      _EE_.removeListener("_set_directive");
    };
  }, []);

  return (
    <div style={{ width: "100%", height: "100%", position: "absolute" }}>
      <Draw directive={directive} />
      <Tools directive={directive} />
      <DotBackground />
    </div>
  );
}

export default Figment;
